import React, {useState} from 'react';
import {View, Text, TextInput, Button, StyleSheet} from 'react-native';
const Login = (props) => {  
  const [username, setUsername] = useState('');  
  const [password, setPassword] = useState('');  
  const [isLoading, setLoading] = useState(false);  
  const [error, setError] = useState('');  
  
  const handleUsernameChange = (e) => {  
    console.log(e.target.value, '11');  
    setUsername(e.target.value);  
  };  
  
  const handlePasswordChange = (e) => {  
    setPassword(e.target.value);  

  };  
  const handleLogin = () => {  
    console.log("11111");
    setLoading(true);  
    // 在这里进行登录逻辑，例如发送请求到服务器验证用户信息  
    // 假设验证成功，将isLoading和error重置为初始状态  
    setLoading(false);  
    setError('');  
    props.navigation.navigate('Demo');
  };  
  
  return (  
    <View style={styles.container}>  
      <View style={styles.login}>  
        <Text style={styles.title}>校园食品安装监督平台管理端</Text>  
      </View>  
      <View style={styles.loginbox}>  
        <TextInput  
          style={styles.input}  
          placeholder="请输入账号"  
          onChangeText={handleUsernameChange}  
          value={username}  
        />  
        <TextInput  
          style={styles.input}  
          placeholder="请输入密码"  
          onChangeText={handlePasswordChange}  
          value={password}  
          secureTextEntry={true}  
        />  
        <Button  
          style={styles.but}  
          title="登录"  
          onPress={handleLogin}  
          disabled={isLoading}>  
          {isLoading && <Text>Loading...</Text>}  
          {error && <Text>Error: {error}</Text>}  
        </Button>  
      </View>  
    </View>  
  );  
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
  },

  login: {
    height: '40%',
    backgroundColor: '#a3cf62',
    paddingTop: 60,
    borderBottomLeftRadius: 100,
  },
  title: {
    fontSize: 40,
    marginBottom: 16,
    color: 'white',
  },

  loginbox: {
    width: '90%',
    height: '30%',
    backgroundColor: 'white',
    borderRadius: 10,
    padding: 20,
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    left: 20,
    top: 230,
    transform: 'translate(0, 0)', // 控制垂直方向不移动
  },
  input: {
    height: 40,
    width: '90%',
    margin: 10,
    padding: 10,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 16,
  },
  but: {
    width: 90,
    color: 'white',
    backgroundColor: '#a3cf62',
    borderRadius: 5,
  },
});

export default Login;
